// * "下载APP按钮"
let downloadBtn = document.querySelector(".header__navigation-QRCode");

// * 二维码
let triangle = document.querySelector(".header__QRCode-triangle");
let QRCodeBox = document.querySelector(".header__QRCode-box");

downloadBtn.onmouseenter = function () {
  triangle.style.display = "block";
  triangle.style.zIndex = 100;
  QRCodeBox.style.display = "block";
  QRCodeBox.style.zIndex = 100;
};
downloadBtn.onmouseleave = function () {
  triangle.style.display = "none";
  QRCodeBox.style.display = "none";
};

// * 购物车按钮
let cartBtn = document.querySelector(".header__navigation-cart");
// * 购物车框
let cartBox = document.querySelector(".header__cart-box");

cartBtn.onmouseenter = function () {
  cartBox.style.display = "block";
  cartBox.style.zIndex = 100;
};
cartBtn.onmouseleave = function () {
  cartBox.style.display = "none";
};

// * navigation-big2 二级菜单
// * 获取按钮
let lis = document.querySelectorAll(".header__navigation-big2 li");
// * 对应的div
let menus = document.querySelectorAll(".header__navigation-menu ul");
// console.log(menus[0]);
// ? 小米手机
lis[0].onmouseenter = function () {
  menus[0].style.display = "block";
  menus[0].style.zIndex = 100;
};
lis[0].onmouseleave = function () {
  menus[0].style.display = "none";
};

// ? 红米手机
lis[1].onmouseenter = function () {
  menus[1].style.display = "block";
  menus[1].style.zIndex = 100;
};
lis[1].onmouseleave = function () {
  menus[1].style.display = "none";
};

// ? 电视
lis[2].onmouseenter = function () {
  menus[2].style.display = "block";
  menus[2].style.zIndex = 100;
};
lis[2].onmouseleave = function () {
  menus[2].style.display = "none";
};

// ? 笔记本
lis[3].onmouseenter = function () {
  menus[3].style.display = "block";
  menus[3].style.zIndex = 100;
};
lis[3].onmouseleave = function () {
  menus[3].style.display = "none";
};

// ? 平板
lis[4].onmouseenter = function () {
  menus[4].style.display = "block";
  menus[4].style.zIndex = 100;
};
lis[4].onmouseleave = function () {
  menus[4].style.display = "none";
};

// ? 家电
lis[5].onmouseenter = function () {
  menus[5].style.display = "block";
  menus[5].style.zIndex = 100;
};
lis[5].onmouseleave = function () {
  menus[5].style.display = "none";
};

// ? 路由器
lis[6].onmouseenter = function () {
  menus[6].style.display = "block";
  menus[6].style.zIndex = 100;
};
lis[6].onmouseleave = function () {
  menus[6].style.display = "none";
};

// ? 搜索框
let searchIpt = document.querySelector(".header__navigation-searchIpt input");
// ? 搜索预览结果框
let searchRes = document.querySelector(".header__search-result");
// ? 搜索按钮
let FDJIpt = document.querySelector(".header__navigation-searchIpt span");

searchIpt.onfocus = function () {
  this.style.borderColor = "orange";
  FDJIpt.style.borderColor = "orange";
  searchRes.style.display = "block";
  searchRes.style.zIndex = 100;
};

searchIpt.onblur = function () {
  searchRes.style.display = "none";
  this.style.borderColor = "#ccc";
  FDJIpt.style.borderColor = "#ccc";
};

// ***轮播图
// 页码
let pageNum = 0;
// 获取ul25中的li
let btns = document.querySelectorAll(".header__slideshow-dots li");
// ul24中的li
let items = document.querySelectorAll(".header__slideshow li");
// console.log(btns);
btns.forEach((btn, index) => {
  btn.onclick = () => {
    btns[pageNum].style.background = "#ccc";

    items[pageNum].style.opacity = 0;

    btn.style.background = "blue";

    items[index].style.opacity = 1;

    pageNum = index;
    // console.log(pageNum);
  };
});
// 获取翻页按钮
let rightBtn = document.querySelector(".header__slideshow-rightBtn");
rightBtn.onclick = function () {
  btns[pageNum].style.background = "#ccc";
  items[pageNum].style.opacity = 0;
  // 下一页页码
  let nextPage = pageNum + 1;
  // console.log(nextPage);
  if (nextPage == 4) {
    nextPage = 0;
  }
  btns[nextPage].style.background = "blue";
  items[nextPage].style.opacity = 1;
  pageNum = nextPage;
};

let leftBtn = document.querySelector(".header__slideshow-leftBtn");
leftBtn.onclick = function () {
  btns[pageNum].style.background = "#ccc";
  items[pageNum].style.opacity = 0;
  // 上一页页码
  let nextPage = pageNum - 1;
  if (nextPage == -1) {
    nextPage = 3;
  }
  btns[nextPage].style.background = "blue";
  items[nextPage].style.opacity = 1;
  pageNum = nextPage;
};

// 自动播放
let timer = setInterval(() => {
  rightBtn.onclick();
}, 3000);

// 轮播图播放&暂停按钮
let kai = document.querySelector(".header__slideshow-status .li1");
let zan = document.querySelector(".header__slideshow-status .li2");

// console.log(kai);
kai.onclick = function () {
  kai.style.display = "none";
  zan.style.display = "block";
  clearInterval(timer);
  zan.onclick = function () {
    kai.style.display = "block";
    zan.style.display = "none";
    timer = setInterval(() => {
      rightBtn.onclick();
    }, 3000);
  };
};

// ? 导航栏列表的二级菜单
let lists = document.querySelectorAll(".header__navList li");
let listNavMenu = document.querySelector(".header__navList-menu");
let uls = document.querySelectorAll(".header__navList-menu ul");

lists[0].onmouseenter = function () {
    uls[0].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[0].onmouseleave = function(){
    uls[0].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[1].onmouseenter = function () {
    uls[1].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[1].onmouseleave = function(){
    uls[1].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[2].onmouseenter = function () {
    uls[2].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[2].onmouseleave = function(){
    uls[2].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[3].onmouseenter = function () {
    uls[3].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[3].onmouseleave = function(){
    uls[3].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[4].onmouseenter = function () {
    uls[4].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[4].onmouseleave = function(){
    uls[4].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[5].onmouseenter = function () {
    uls[5].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[5].onmouseleave = function(){
    uls[5].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[6].onmouseenter = function () {
    uls[6].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[6].onmouseleave = function(){
    uls[6].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[7].onmouseenter = function () {
    uls[7].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[7].onmouseleave = function(){
    uls[7].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[8].onmouseenter = function () {
    uls[8].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[8].onmouseleave = function(){
    uls[8].style.display = "none";
    listNavMenu.style.display = "none";
}

lists[9].onmouseenter = function () {
    uls[9].style.display = "block";
    listNavMenu.style.display = "block";
};
lists[9].onmouseleave = function(){
    uls[9].style.display = "none";
    listNavMenu.style.display = "none";
}

// ?返回顶部
let Top = document.querySelector(".content__aside-toTop");
// ? 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (
    document.body.scrollTop > 700 ||
    document.documentElement.scrollTop > 700
  ) {
    document.querySelector(".content__aside-toTop").style.display = "block";
  } else {
    document.querySelector(".content__aside-toTop").style.display = "none";
  }
}

// ? 点击按钮，返回顶部
Top.onclick = function () {
  document.documentElement.scrollTop = 0;
}

// ! 注册
let regBtn = document.querySelector(".header__register-btn");

regBtn.onclick = () => {
  location.href = "register.html";
}

// ! 登录
let logBtn = document.querySelector(".header__login-btn");

logBtn.onclick = () => {
  location.href = "login.html";
}

// ! 购物车
let goCartBtn = document.querySelector(".header__navigation-cart");

goCartBtn.onclick = () => {
  location.href = "cart.html";
}

let goCartbtn2 = document.querySelector(".goCart-btn2");

goCartbtn2.onclick = () => {
  location.href = "cart.html";
}